<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:composition template="templates/creatively-form.xhtml">

        <ui:param name="pageTitle" value="Registration"/>
        <ui:param name="webSiteTitle" value="X Files"/>

        <ui:define name="submenu">
            <ul>
                <li><a href="#{request.contextPath}/faces/login.xhtml">Sign In</a></li>
                <li><a href="#{request.contextPath}/faces/recover.xhtml">Recover Password</a></li>
                <li class="selected"><a href="#">Registration Form</a></li>
            </ul>
        </ui:define>

        <ui:define name="sidebar">
            <h3>See Also</h3>
            <ul class="categories">
                <li><a href="#{request.contextPath}/faces/contacts.xhtml">Contact us</a></li>
                <li><a href="#{request.contextPath}/faces/terms.xhtml">Terms of use</a></li>
                <li><a href="#{request.contextPath}/faces/faq.xhtml">FAQ</a></li>
                <li><a href="#{request.contextPath}/faces/tutorial.xhtml">Tutorial</a></li>
            </ul>	
        </ui:define>

        <ui:define name="content">
            <div id="registration_form_container">
                <h:form id="registration_form" prependId="false"> 
                    <p><strong>Registration</strong></p>
                    <h:messages id="messages" class="message" title="Validation Errors" showDetail="true"
                                style="margin-left: 0;" errorClass="message_bad" fatalClass="message_bad"
                                warnClass="message_info" infoClass="message_good">
                    </h:messages>
                    <table style="width: 500px; vertical-align: central;">
                        <tr>
                            <td><label for="emailsignup" data-icon="e" >Your email</label></td>
                            <td><h:inputText id="emailsignup" class="input-large" placeholder="mysupermail@mail.com" value="#{registrationBean.email}"/></td> 
                        </tr>
                        <tr> 
                            <td><label for="passwordsignup" data-icon="p">Your password </label></td>
                            <td><h:inputSecret id="passwordsignup" class="input-large" placeholder="eg. X8df!90EO" value="#{registrationBean.password}"/></td>
                        </tr>
                        <tr> 
                            <td><label for="passwordsignup_confirm" data-icon="p">Please confirm your password </label></td>
                            <td><h:inputSecret id="passwordsignup_confirm" class="input-large" placeholder="eg. X8df!90EO" value="#{registrationBean.passwordConfirmation}"/></td>
                        </tr>
                        <tr>
                            <td><label for="first_name" data-icon="e" >First Name</label></td>
                            <td><h:inputText id="first_name" class="input-large" placeholder="John" value="#{registrationBean.firstName}"/></td> 
                        </tr>
                        <tr>
                            <td><label for="last_name" data-icon="e" >Last Name</label></td>
                            <td><h:inputText id="last_name" class="input-large" placeholder="Doe" value="#{registrationBean.lastName}"/></td> 
                        </tr>
                        <tr>
                            <td><label for="info" data-icon="e" >Extra Info</label></td>
                            <td><h:inputText id="info" class="input-large" value="#{registrationBean.info}" placeholder="Personal info we have to know about you"/></td> 
                        </tr>
                        <tr> 
                            <td>  
                                Already a member ?
                                <a href="#{request.contextPath}/faces/login.xhtml"> Go and log in </a>
                            </td>
                            <td style="text-align: right;" class="input-large">
                                <h:commandLink class="button_green" style="text-decoration: none;" value="Sign up!" actionListener="#{registrationBean.registerAction}">
                                    <f:ajax execute="@form" render="@form" onevent="handleRegistration"/>
                                </h:commandLink>
                            </td>
                        </tr>
                    </table>
                    <h:inputHidden id="registration_status" value="#{registrationBean.registrationStatus}"/>
                </h:form>
                <script type="text/javascript">
                        function handleRegistration(e) {
                            if(e.status == 'success') {
                                var status = $('#registration_status').val();
                                if(status == 'ok') {
                                    window.location = '#{request.contextPath}/faces/login.xhtml';
                                }
                            }
                        }
                    </script>
            </div>
        </ui:define>
        
        <ui:define name="testimonials">
            <li>
                <q>Maecenas ut lacinia lorem. Nulla lacinia interdum porttitor. Curabitur id nisi elit, in pharetra est.</q>
                <span class="author">John Doe</span>
            </li>
            <li>
                <q>Fusce rutrum rutrum leo, congue semper eros ornare a. Quisque id orci dapibus mauris volutpat accumsan.</q>
                <span class="author">John Smith</span>
            </li>
        </ui:define>

        <ui:define name="twitter">
            <ul id="twitter"></ul>
        </ui:define>

        <ui:define name="list">
            <li>
                <h3><span>1</span> Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut ipsum dui, id egestas sapien.</p>
            </li>
            <li>
                <h3><span>2</span> In consectetur nunc quis massa</h3>
                <p>In consectetur nunc quis massa pharetra eu elementum ante commodo. Curabitur nulla ligula, pretium fermentum accumsan at.</p>
            </li>
        </ui:define>

    </ui:composition>

</html>